<template>
	<div class="container">
		<Layout>
			<!-- 导航栏 -->
			<Header class="header">
				<Row type="flex" justify="center" align="middle">
					<Col span="17" class="Col-flex">
					<div class="Col-flex-logo">
						<img src="./assets/logo.png">
					</div>
					<ul class="Col-flex-nav">
						<li>
							<Button class="button" type="text" ghost>登陆</Button>
							<Divider type="vertical" />
							<Button type="text" @click="register" ghost>注册</Button>
						</li>
						<li>
							<Button type="text" to="/order" ghost>我的订单</Button>
						</li>
						<li>
							<Button type="text" to="/collect" ghost>我的收藏</Button>
						</li>
						<li>
							<Button type="text" to="/shoppingCart" ghost>购物车</Button>
						</li>
					</ul>
					</Col>
				</Row>
			</Header>

			<!-- main -->
			<Content>
				<!-- nav -->
				<Row style="margin: 10px 0;border-bottom: #d8d8d8 1px solid;" type="flex" justify="center"
					align="middle">
					<Col span="3">
					<img style="width: 90%;height: 90%;" src="./assets/indexLogo.png">
					</Col>
					<Col span="9">
					<Menu style="background-color: #F5F7F9;" mode="horizontal" theme="light" active-name="1">
						<MenuItem name="1" to="/">
						<Icon type="ios-home" />
						首页
						</MenuItem>
						<MenuItem name="2" to="/goods">
						<Icon type="ios-apps" />
						全部商品
						</MenuItem>
						<MenuItem name="3" to="/about">
						<Icon type="ios-paper" />
						关于我们
						</MenuItem>
					</Menu>
					</Col>
					<Col span="4">
					<Input search enter-button placeholder="请输入搜索内容~" />
					</Col>
				</Row>

				<!-- <router-link to="/">Home</router-link> -->
				<keep-alive>
					<router-view></router-view>
				</keep-alive>

				<!-- 轮播图 -->
				<Row type="flex" justify="center">
					<Col span="16">
					<Carousel autoplay loop height="auto">
						<CarouselItem v-for="(item,index) in 4" :key="item">
							<img ref="barparent" class="CarouselSize" :src="`src/assets/banner/cms_${item}.jpg`">
						</CarouselItem>
					</Carousel>
					</Col>
				</Row>
			</Content>

			<!-- 页脚 -->
			<Footer class="footer">
				<Row type="flex" justify="center">
					<Col span="16" class-name="footer-flex">
					<div class="footer-item-flex">
						<el-image style="width: 50px; height: 55px" src="./src/assets/us-icon-xx.png" fit="fit">
						</el-image>
						<h2>7天无理由退换货</h2>
					</div>
					<div class="footer-item-flex">
						<el-image style="width: 50px; height: 55px" src="./src/assets/us-icon-xx.png" fit="fit">
						</el-image>
						<h2>满99元全场免邮</h2>
					</div>
					<div class="footer-item-flex">
						<el-image style="width: 50px; height: 55px" src="./src/assets/us-icon-xx.png" fit="fit">
						</el-image>
						<h2>100%品质保证</h2>
					</div>
					</Col>
				</Row>
				<Row type="flex" justify="center">
					<Col span="24">
					<div style="border-top: 1px solid #888888;"></div>
					</Col>
				</Row>
				<Row type="flex" justify="center">
					<Col span="16">
					<p class="coty">商城版权所有 &copy; 2012-2021</p>
					</Col>
				</Row>
			</Footer>
		</Layout>

		<!-- 登陆组件 -->
		<Login />
	</div>
</template>

<script>
	import Login from './components/Login.vue';
	import { mapActions, mapGetters } from "vuex";
	export default {
		data() {
			return {
				activeIndex: '', // 头部导航栏选中的标签
				search: "",
			}
		},
		components: {
			Login
		},
		computed: {
			...mapGetters('login',['getShowLogin']),
		},
		methods: {
			...mapActions('login',['setShowLogin']),
			register() {
				this.setShowLogin(true);
				// this.$store.dispatch('login/setShowLogin', true);
			}
		},
		created() {
			// console.log(this.$route);
		}
	}
</script>

<style scoped lang="scss">
	@mixin imagesize($width) {
		$height: ($width / 16) * 9 + px;
		height: $height;
		width: $width + px;
	}

	.ivu-menu-light {
		&:after {
			height: 0px !important;
		}
	}

	.CarouselSize {
		// @include imagesize(1200)
		height: 460px;
		object-fit: contain;
	}

	.header {
		height: 6vh;
		background-color: #3D3D3D;

		.Col-flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 6vh;

			.Col-flex-logo {
				// width: 4vw;
				// height: 100%;
				display: flex;

				& img {
					width: 18%;
					height: 18%;
				}
			}

			.Col-flex-nav {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 6vh;

				& li {
					margin-left: 10px;
					height: 100%;
					display: flex;
					align-items: center;

					&>.ivu-btn {
						padding: 0;
						// margin-left: 10px;
					}
				}
			}
		}
	}

	.footer {
		// background-color: #888888;
		background-color: #3D3D3D;
		text-align: center;

		.footer-flex {
			display: flex;
			justify-content: space-evenly;
			color: white;
			padding: 20px 50px;

			.footer-item-flex {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;

				& h2::before {
					content: "";
					margin: 10px;
				}
			}
		}
	}

	.coty {
		color: #888888;
		padding: 20px;
	}
</style>
